<template>
  <div class="container">
    <div class="topBox">
      <div class="topTitle">
        <img src="@/assets/common/未标题-1.png" alt="" />
        美欣达印染园区
      </div>
      <div class="numBox">
        <div class="numItem">
          <div class="value">{{ ticketTotal.dangerCount }}</div>
          <div class="title">隐患总数</div>
        </div>
        <div class="numItem">
          <div class="value">{{ ticketTotal.ticketCount }}</div>
          <div class="title">作业票总数</div>
        </div>
      </div>

      <div class="noticeBox">
        <div class="left">
          <img src="@/assets/common/组 369.png" alt="" />
          <div>您有新的隐患任务待整改，去整改</div>
        </div>
        <!-- <div class="right" @click="goNotice">全部 ></div> -->
      </div>
    </div>

    <div class="indexBox">
      <div class="indexItem">
        <div class="indexTitle">隐患排查</div>
        <div class="indexBottomBox">
          <div class="indexBottomItem" @click="goAddProBlem">
            <div class="indexBottomItemValue">
              <img src="@/assets/common/组 7984.png" alt="" />
            </div>
            <div class="indexBottomItemTitle">隐患登记</div>
          </div>
          <div class="indexBottomItem" @click="goProBlem">
            <div class="indexBottomItemValue">
              <img src="@/assets/common/组 7985.png" alt="" />
            </div>
            <div class="indexBottomItemTitle">我的提交</div>
          </div>
          <div class="indexBottomItem" @click="goProBlem2">
            <div class="indexBottomItemValue">
              <img src="@/assets/common/组 7986.png" alt="" />
              <div class="idot" v-show="idotBox.hiddenDangerToDoNum > 0">
                {{ idotBox.hiddenDangerToDoNum }}
              </div>
            </div>
            <div class="indexBottomItemTitle">隐患待办</div>
          </div>
        </div>
      </div>
      <div class="indexItem indexItem2">
        <div class="indexTitle">特殊作业</div>
        <div class="indexBottomBox">
          <div class="indexBottomItem" @click="goWorkApply">
            <div class="indexBottomItemValue">
              <img src="@/assets/common/组 7989.png" alt="" />
            </div>
            <div class="indexBottomItemTitle">作业申请</div>
          </div>
          <div
            class="indexBottomItem"
            @click="$router.push('/mySubmitIndex?activeIndex=1')"
          >
            <div class="indexBottomItemValue">
              <img src="@/assets/common/组 7988.png" alt="" />
            </div>
            <div class="indexBottomItemTitle">我的提交</div>
          </div>
          <div
            class="indexBottomItem"
            @click="$router.push('/myToDoList?activeIndex=1')"
          >
            <div class="indexBottomItemValue">
              <img src="@/assets/common/组 7987.png" alt="" />
              <div class="idot" v-show="idotBox.ticketToDoNum > 0">
                {{ idotBox.ticketToDoNum }}
              </div>
            </div>
            <div class="indexBottomItemTitle">作业待办</div>
          </div>
        </div>
      </div>
    </div>

    <tabbar :activeIndex.sync="nowActive"></tabbar>
  </div>
</template>

<script>
import tabbar from '@/components/tabbar'
import { getTicketPageApi, messageReminderApi } from '@/api/ticket'
export default {
  name: 'indexPage',
  props: {},
  components: {
    tabbar,
  },
  data() {
    return {
      nowActive: 0,
      ticketTotal: {
        ticketCount: '',
        dangerCount: '',
      },
      idotBox: {},
    }
  },
  created() {
    this.getTicketPage()
    this.messageReminderApiGet()
  },
  methods: {
    async messageReminderApiGet() {
      const isLoginMsg = JSON.parse(sessionStorage.getItem('loginInfo'))
      const res = await messageReminderApi({
        id: isLoginMsg.userId,
      })
      this.idotBox = res.data
      // console.log(res)
    },
    async getTicketPage() {
      const res = await getTicketPageApi()
      this.ticketTotal = res.data
    },
    goNotice() {
      this.$router.push({
        path: '/noticeMsg',
        query: {
          // id: item.id,
        },
      })
    },
    goWorkApply() {
      this.$router.push({
        path: '/specialWorkIndex',
        query: {
          // id: item.id,
        },
      })
    },
    goProBlem() {
      this.$router.push({
        path: '/mySubmitIndex',
        query: {
          activeIndex: 0,
        },
      })
    },
    goProBlem2() {
      this.$router.push({
        path: '/myToDoList',
        query: {
          activeIndex: 0,
        },
      })
    },
    goAddProBlem() {
      this.$router.push({
        path: '/addProblem',
        query: {
          // id: item.id,
        },
      })
    },
  },
  mounted() {},
  watch: {},
  computed: {},
  filters: {},
}
</script>

<style scoped lang="scss">
.container {
  height: 100vh;
  width: 100%;
  // background: linear-gradient(180deg, #e6f8ee 0%, #f5f7f6 100%);
  // padding: 0 15px;
  background-color: #f5f6f7;
  box-sizing: border-box;
}
.topBox {
  background-image: url('@/assets/common/组 5846@2x.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 192px;
  .numBox {
    display: flex;
    justify-content: space-evenly;
    padding-top: 20px;
    .numItem {
      text-align: center;
      color: #fff;
      .value {
        font-size: 28px;
        font-weight: bold;
        margin-bottom: 8px;
      }
    }
  }

  .noticeBox {
    background: #ffffff;
    box-shadow: 0px 1px 3px 1px rgba(49, 50, 53, 0.08);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    margin: 0 auto;
    height: 40px;
    line-height: 40px;
    padding: 0 12px;
    transform: translateY(40px);
    .left {
      display: flex;
      align-items: center;
      img {
        width: 16px;
        height: 16px;
        margin-right: 8px;
      }
    }
    .right {
      color: #6d747f;
    }
  }
}
.topTitle {
  padding-top: 15px;
  color: #fff;
  font-size: 16px;
  display: flex;
  align-items: center;
  padding-left: 16px;
  font-weight: bold;
  img {
    width: 24px;
    height: 24px;
    margin-right: 8px;
  }
}
.indexBox {
  padding-top: 30px;
  .indexItem {
    padding: 0 16px;
    margin-bottom: 20px;

    .indexTitle {
      padding-left: 6px;
      color: #313235;
      font-size: 16px;
      font-weight: bold;
      position: relative;
      margin-bottom: 12px;
    }
    .indexTitle::before {
      content: '';
      position: absolute;
      left: -1px;
      top: 4px;
      border-radius: 2px;
      width: 4px; /* 颜色条的宽度 */
      height: 14px; /* 颜色条的高度 */
      background-color: #0077ff; /* 颜色条的颜色 */
    }
    .indexBottomBox {
      display: flex;
      background-color: #fff;
      justify-content: space-between;
      text-align: center;
      padding: 16px 32px;
      border-radius: 12px;
      img {
        width: 48px;
        height: 48px;
        margin-bottom: 12px;
      }
      .indexBottomItemValue {
        position: relative;
        .idot {
          position: absolute;
          right: 0;
          top: 0;
          width: 18px;
          height: 18px;
          background-color: #ff4d4f;
          color: #fff;
          border-radius: 50%;
          transform: translate(0, -50%);
        }
      }
    }
  }
  .indexItem2 {
    .indexTitle::before {
      content: '';
      position: absolute;
      left: -1px;
      top: 4px;
      border-radius: 2px;
      width: 4px; /* 颜色条的宽度 */
      height: 14px; /* 颜色条的高度 */
      background-color: #00b7ff; /* 颜色条的颜色 */
    }
  }
}
</style>
